<template>
	<view class="identityAuthentication">
		<view class="top">
			<view class="imgs">
				<view class="" @tap="idCart(1)">
					<image v-if="!data.obj.certFileFront" src="/static/img/index/54.png" mode="widthFix"></image>
					<image v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.certFileFront"
						mode="aspectFill"></image>
					身份证人像面
				</view>
				<view class="" @tap="idCart(2)">
					<image v-if="!data.obj.certFileBack" src="/static/img/index/55.png" mode="widthFix"></image>
					<image v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.certFileBack"
						mode="aspectFill"></image>
					身份证国徽面
				</view>
				<view class="" @tap="idCart(3)">
					<image v-if="!data.obj.faceFileId" src="/static/img/index/167.png" mode="widthFix"></image>
					<image v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.faceFileId"
						mode="aspectFill"></image>
					人脸
				</view>
			</view>
			<view class="input">
				<view class="">
					姓名
					<input v-model="data.obj.realName" type="text" placeholder-class="placeholderClass"
						placeholder="请输入姓名" />
				</view>
				<view class="">
					身份证
					<input v-model="data.obj.certNo" type="text" placeholder-class="placeholderClass"
						placeholder="请输入身份证" />
				</view>
			</view>
		</view>
		<view class="bot" @tap="commit"
			:class="data.obj.certNo && data.obj.realName && data.obj.certFileBack && data.obj.certFileFront && data.obj.faceFileId?'active':''">
			提交
		</view>
	</view>
</template>

<script lang="ts" setup>
	import imgUpload from '@/utils/imgUpload.ts'
	import { authRealName, ocrCertNo } from '@/utils/api/shop'
	import { setDialogView } from '@/utils/dialogView.ts'
	import { reactive } from 'vue';
	const data = reactive<any>({
		httpUrl: getApp().globalData.baseUrl,
		obj: { certFileBack: '', certNo: '', realName: '', certFileFront: '', mainFileIds: [] }
	})
	const commit = () => {
		if (data.obj.certNo && data.obj.realName && data.obj.certFileBack && data.obj.certFileFront && data.obj.faceFileId) {
			uni.showLoading({
				title: '加载中...'
			})
			authRealName({ data: data.obj }).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功!',
						icon: 'none'
					})
					// uni.$emit('onIdentityAuthentication', {
					// 	certFrontFile: data.obj.certFileFront,
					// 	certBackFile: data.obj.certFileBack
					// })
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}

			})
		}

	}
	const idCart = (i : number) => {
		if (i == 3) {
			setDialogView('CAMERA').then(res => {
				if (res == 1) {
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: (e : any) => {
							imgUpload(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }), (e : any) => {
								data.obj.faceFileId = e[0].fileId
							})
						}
					})
				}
			})
		} else {
			uni.showActionSheet({
				itemList: ['拍摄', '从相册选择'],
				success: (e) => {
					let key = ''
					if (e.tapIndex == 0) {
						key = 'camera'
					} else {
						key = 'album'
					}
					setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
						if (res == 1) {
							uni.chooseImage({
								count: 1,
								sourceType: [key],
								success: (e : any) => {
									imgUpload(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }), (e : any) => {
										// data.obj.mainFileIds = [...data.obj.mainFileIds, ...e.map((item : any) => { return item.fileId })];
										if (i == 1) {
											data.obj.certFileFront = e[0].fileId;
											setTimeout(() => {
												uni.showLoading({
													title: '识别中...',
												})
											})

											setTimeout(() => {
												ocrCertNo({ data: { fileId: e[0].fileId } }).then((res) => {
													data.obj.certNo = res.data.certNo
													data.obj.realName = res.data.name
													if (res.code == 200) {
														uni.showToast({
															title: '识别成功!',
															icon: "none"
														})
													}
												}).catch(() => {
													data.obj.certFileFront = ''
												})
											}, 2000)

										} else {
											data.obj.certFileBack = e[0].fileId
										}
									})
								}
							})
						}
					})

				}
			})
			// uni.chooseImage({
			// 	count: 1,
			// 	sourceType: i == 3?['camera']:['camera', 'album'],
			// 	success: (e) => {
			// 		imgUpload([{ filePath: e.tempFiles[0].path }], (e : any) => {
			// 			if (i == 1) {
			// 				data.obj.certFileFront = e[0].fileId;
			// 				setTimeout(() => {
			// 					uni.showLoading({
			// 						title: '识别中...',
			// 					})
			// 				})

			// 				setTimeout(() => {
			// 					ocrCertNo({ data: { fileId: e[0].fileId } }).then((res) => {
			// 						data.obj.certNo = res.data.certNo
			// 						data.obj.realName = res.data.name
			// 						if (res.code == 200) {
			// 							uni.showToast({
			// 								title: '识别成功!',
			// 								icon: "none"
			// 							})
			// 						}
			// 					}).catch(() => {
			// 						data.obj.certFileFront = ''
			// 					})
			// 				}, 2000)

			// 			} else (i == 2) {
			// 				data.obj.certFileBack = e[0].fileId
			// 			}
			// 		})

			// 	}
			// })
		}

	}
</script>

<style lang="scss">
	.identityAuthentication {
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		background: #F4F6FA;

		>.top {
			flex: 1;

			.imgs {
				background: #fff;
				border-radius: 24rpx;
				padding: 48rpx 90rpx;

				>view {
					color: #8C8C8C;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						border-radius: 24rpx;
						width: 100%;
						height: 312rpx;
						margin-bottom: 32rpx;
					}
				}

				>view:nth-of-type(2) {
					margin: 62rpx 0;
				}
			}

			.input {
				background: #fff;
				border-radius: 24rpx;
				padding: 0 32rpx;
				margin-top: 20rpx;

				view {
					height: 100rpx;
					display: flex;
					align-items: center;

					input {
						flex: 1;
						text-align: right;
						margin-left: 50rpx;
						font-size: 28rpx;

					}

					.placeholderClass {
						color: #BFBFBF;
					}
				}

				view:nth-of-type(1) {
					border-bottom: 1rpx solid #F0F0F0;
				}
			}
		}

		>.bot {
			line-height: 96rpx;
			text-align: center;
			background: #F0F0F0;
			font-size: 36rpx;
			color: #BFBFBF;
			border-radius: 96rpx;
			margin-top: 60rpx;
		}

		.active {
			background: #6B64D3;
			color: #fff;
		}
	}
</style>